<template>
  <div class="container">
  <div class="tags-panel">
    <ul class="tags-lines">
      <li class="tags-line">
        <div class="tags-title">类型：</div>
        <ul class="tags">
          <li class="active"><a>全部</a></li>
          <li><a href="">爱情</a></li>
          <li><a href="">喜剧</a></li>
          <li><a href="">动画</a></li>
          <li><a href="">科幻</a></li>
          <li><a href="">恐怖</a></li>
          <li><a href="">悬疑</a></li>
          <li><a href="">犯罪</a></li>
          <li><a href="">冒险</a></li>
          <li><a href="">战争</a></li>
          <li><a href="">奇幻</a></li>
          <li><a href="">运动</a></li>
          <li><a href="">家庭</a></li>
          <li><a href="">古装</a></li>
          <li><a href="">武侠</a></li>
          <li><a href="">历史</a></li>
          <li><a href="">歌舞</a></li>
          <li><a href="">纪录片</a></li>
          <li><a href="">其他</a></li>
        </ul>
      </li>
      <li class="tags-line tags-line-border">
        <div class="tags-title">区域：</div>
        <ul class="tags">
          <li class="active"><a>全部</a></li>
          <li><a href="">大陆</a></li>
          <li><a href="">美国</a></li>
          <li><a href="">韩国</a></li>
          <li><a href="">日本</a></li>
          <li><a href="">中国台湾</a></li>
          <li><a href="">中国香港</a></li>
          <li><a href="">泰国</a></li>
          <li><a href="">印度</a></li>
          <li><a href="">法国</a></li>
          <li><a href="">英国</a></li>
          <li><a href="">俄罗斯</a></li>
          <li><a href="">意大利</a></li>
          <li><a href="">西班牙</a></li>
          <li><a href="">德国</a></li>
        </ul>
      </li>
      <li class="tags-line tags-line-border">
        <div class="tags-title">年代：</div>
        <ul class="tags">
          <li class="active"><a>全部</a></li>
          <li><a href="">2020</a></li>
          <li><a href="">2019</a></li>
          <li><a href="">2018</a></li>
          <li><a href="">2017</a></li>
          <li><a href="">2016</a></li>
          <li><a href="">2015</a></li>
          <li><a href="">2014</a></li>
          <li><a href="">2013</a></li>
          <li><a href="">2012</a></li>
          <li><a href="">2011</a></li>
          <li><a href="">2000-2010</a></li>
          <li><a href="">90年代</a></li>
          <li><a href="">80年代</a></li>
          <li><a href="">70年代</a></li>
          <li><a href="">更早</a></li>
        </ul>
      </li>
    </ul>
  </div>
    <!--<div v-for="movies in movieList">
      {{movies}}
    </div>-->
  </div>

</template>

<script>
    export default {
      name: "movies_left"
    }
</script>

<style scoped>
  .container {
    width: 1200px;
    margin: 0 auto;
  }
  .tags-panel {
    border: 1px solid #d5d5d5;
    padding: 0 20px;
    margin-top: 40px;
    height:210px;
    margin-right: 10%;
    margin-left: 10%;
  }
  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  .tags-line {
    padding: 10px 0!important;
  }
  .tags-line-border {
    border-top: 1px dashed #e5e5e5;
  }
  li {
    display: list-item;
    text-align: -webkit-match-parent;
  }
  .tags-title {
    height: 24px;
    line-height: 24px;
    float: left;
    color: #999;
    font-size: 14px;
  }
  .tags-panel ul.tags {
    margin-left: 40px;
  }

  .tags-panel li, .tags-panel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  ul ul {
    list-style-type: circle;
    margin-block-start: 0px;
    margin-block-end: 0px;
  }

  ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
  }
  .tags-panel li, .tags-panel ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  ul ul {
    list-style-type: circle;
    margin-block-start: 0px;
    margin-block-end: 0px;
  }

  .tags li.active {
    background: #f34d41;
    color: #fff;
  }
  .tags li {
    border-radius: 14px;
    padding: 3px 9px;
    display: inline-block;
    margin-left: 12px;
  }
  .tags li.active a {
    color: #fff;
  }
  .tags li a {
    color: #333;
    font-size: 14px;
  }
  a {
    text-decoration: none;
  }
  /*.tags li:hover{
    background: #f34d41;
    color: #fff;
  }
  .tags li a:hover {
    color: #fff;
  }*/
</style>
